<template>
    <div>
        <!-- 使用layout布局 -->
        <van-nav-bar title="歌单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        &nbsp;
        <van-row justify="space-around" class="row1">
            <van-col span="10">
                &nbsp;&nbsp;&nbsp;
                <van-image width="3rem" height="3rem" :radius="10" fit="cover"
                    :src="steetDetail.coverImgUrl" />
            </van-col>
            <van-col span="12">
                <van-cell-group inset>
                    <van-cell :title="steetDetail.name" />
                    <van-cell :title="user" />
                </van-cell-group>
                <van-divider />
            </van-col>
            <van-col span="1"></van-col>
            <van-col span="1"></van-col>
        </van-row>
        <!-- 收藏、评论、分享 -->
        <van-grid direction="horizontal" :column-num="3">
            <van-grid-item icon="peer-pay" text="收藏" @click="getSteetToMe(1)"/>
            <van-grid-item icon="chat-o" text="评论" />
            <van-grid-item icon="share-o" text="分享"  @click="isShare"/>
        </van-grid>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
    </div>
    <div class="smallTitle">
            <button class="allBtn" @click="getAll">
                <van-icon name="play-circle" color="#EC4141" size="20" />&nbsp;&nbsp;播放全部
            </button>
            <van-icon name="wap-nav" size="20" />
        </div>
    <div class="songSteet">
            <van-list>
                <van-cell v-for="item, index in steetSongs" :key="item.id" @click="onSongId(item.id)">
                    <span class="listNum">{{ index + 1 }}</span>
                    {{ item.name }} - {{ ar[index].join('/') }} - {{item.al.name}}
                    <!-- <van-icon name="video-o" @click.stop="showMV(item.id)"/> -->
                    <van-icon class="more" name="ellipsis" @click.stop="show = true" />
                    <van-action-sheet v-model:show="show" @select="onSelect">
                        <div class="songCart">
                            <van-image width="40" height="40" :src="item.al.picUrl" />&nbsp;&nbsp;
                            <span>歌曲：{{ item.name }} - {{ item.ar.name }}</span>
                        </div>
                        <van-list>
                            <van-cell><van-icon name="close" />&nbsp;&nbsp;&nbsp;不感兴趣</van-cell>
                            <van-cell><van-icon name="music-o"/>&nbsp;&nbsp;&nbsp;下一首播放</van-cell>
                            <van-cell><van-icon name="certificate" />&nbsp;&nbsp;&nbsp;收藏到歌单</van-cell>
                            <van-cell><van-icon name="down" />&nbsp;&nbsp;&nbsp;下载</van-cell>
                            <van-cell><van-icon name="chat-o" />&nbsp;&nbsp;&nbsp;评论</van-cell>
                            <van-cell><van-icon name="share-o" />&nbsp;&nbsp;&nbsp;分享</van-cell>
                            <van-cell><van-icon name="contact" />&nbsp;&nbsp;&nbsp;歌手：{{ar[index].join('/')}}</van-cell>
                            <van-cell><van-icon name="idcard" />&nbsp;&nbsp;&nbsp;专辑：{{item.al.name}}</van-cell>
                            <van-cell><van-icon name="warning-o" />&nbsp;&nbsp;&nbsp;屏蔽歌手或歌曲</van-cell>
                        </van-list>
                    </van-action-sheet>
                </van-cell>
            </van-list>
        </div>
</template>

<script setup lang="ts">
import { RequestSteetAllSongs, RequestSteetDetail, RequestGetAndCancelSteet, RequestAllMV } from '@/api/homeFind';
import { ref } from 'vue';
import { useRoute } from 'vue-router'
import axios  from 'axios'
import { Toast } from 'vant';
import UserLogin from '../Login/UserLogin.vue';
import router from '@/router';



const activeNames = ref(['1']);
const loading = ref(false)
const finished = ref(false)
const route = useRoute()
const show = ref(false);
const onClickLeft = () => history.back();

// let songId = ref(0)
let steetId: number = Number(route.params.id)

// 弹窗
const onSelect = (item:any) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    Toast(item.name);
};

// 分享组件
function isShare() {
	showShare.value = true
}
const showShare = ref(false);
const options = [
	[
		{ name: '微信', icon: 'wechat' },
		{ name: '朋友圈', icon: 'wechat-moments' },
		{ name: '微博', icon: 'weibo' },
		{ name: 'QQ', icon: 'qq' },
	],
	[
		{ name: '复制链接', icon: 'link' },
		{ name: '分享海报', icon: 'poster' },
		{ name: '二维码', icon: 'qrcode' },
		{ name: '小程序码', icon: 'weapp-qrcode' },
	],
];

const toIndex = (index:number) => console.log(index)

// 获取歌单所有歌曲
let steetSongs = ref([])
let ar = ref([])
const toGetSteetSongs= async (id: number,limit =30)=>{
    let steetSongsData = await RequestSteetAllSongs( id, limit )
    console.log(steetSongsData.data);
    const {code,songs}= steetSongsData.data
    if(code == 200){
        steetSongs.value = songs
        ar.value = steetSongs.value.map(item => {
            return  item.ar.map(item => {
                    return item.name
                })
            })
        // console.log(ar)
    }
}
toGetSteetSongs(steetId,30)

// 歌单详情
let steetDetail = ref([])
let user = ref()
const toGetSteetDetail= async (id: number)=>{
    let steetDetailData = await RequestSteetDetail( id )
    // console.log(steetDetailData.data);
    const {code,playlist}= steetDetailData.data
    if(code == 200){
        steetDetail.value = playlist
        // console.log(steetDetail.value)
        console.log()
        user.value = steetDetail.value.creator.nickname
    }
}
toGetSteetDetail(steetId)
// 传参id，steetId
const onSongId = (id: number) => {
    // console.log(id)
    // songId.value = id
    router.push({
        name: "musicdetail", query: { id: id, steetId: steetId }
    })
}


// 收藏歌单
const getSteetToMe = async (t=1,id=steetId) => {
    let steetToMeData = await RequestGetAndCancelSteet( t, id )
    // console.log(steetToMeData)
    const { code } = steetToMeData.data
    if(code == 200){
        Toast.success('收藏成功');
    }else if(code == 403){
        Toast('服务器理解客户的请求，但拒绝处理它');
        
    }else{
        Toast.fail('未登录，请登录');
    }
}

// // mv
// const showMV = async (id: number, area = "全部", limit = 1000) => {
//     // console.log(id)
//     let allMVData = await RequestAllMV(area, limit)
//     const { code, data } = allMVData.data
//     let res = data.find(item => {
//         // console.log(item.playCount, id)
//         item.playCount == id
//     })
//     console.log(res)
//     // console.log(allMVData)
// }
</script>

<style lang="scss" scoped>
.row1 {
    font-size: 18px;
    font-weight: lighter;
}

.row2 {
    font-size: larger;
}
.smallTitle {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .allBtn {
        outline: none;
        border: none;
        background: white;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

}
.songSteet {
    .listNum {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .more {
        float: right;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .songCart{
        height: 50px;
        padding: 5px 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F3F4;
    }
}

</style>